<template>
  <el-dialog
    title="审批流程详情"
    :visible.sync="isShow"
    width="60%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 简化的步骤条 -->
    <el-steps 
      :space="200"  
      :active="currentStep" 
      finish-status="success" 
      class="simple-steps"
      align-center=""
    >
      <el-step title="未提交"></el-step>
      <el-step title="部门经理审批"></el-step>
      <el-step title="总经理审批"></el-step>
      <el-step title="审批完成"></el-step>
    </el-steps>

    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Flowchart",
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    // 接收当前步骤（0-未开始，1-提交申请，2-审批中，3-审批完成）
    currentStep: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleClose() {
    this.$emit('close'); // 触发父组件的关闭事件
    }
  }
};
</script>

<style scoped>
.simple-steps {
  margin: 40px 0; /* 上下间距，让步骤条居中显示 */
  padding: 0 20px; /* 左右内边距，避免边缘拥挤 */
}
</style>